<template>
  <ul class="header-dialog">
    <li v-for="item in dialogList" :key="item.id">
      <span class="iconfont" :class="item.icon"></span>
      <span>{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      dialogList: [
        {
          id: 1,
          name: '首页',
          icon: 'icon-shouye',
        },
        {
          id: 2,
          name: '分类',
          icon: 'icon-fenlei',
        },
        {
          id: 3,
          name: '购物车',
          icon: 'icon-gouwuche',
        },
        {
          id: 4,
          name: '我的',
          icon: 'icon-wodexiao',
        },
        {
          id: 5,
          name: '足迹',
          icon: 'icon-zuji',
        },
      ],
    }
  },
}
</script>

<style lang="scss">
.header-dialog {
  background: #110808;
  opacity: 0.9;
  padding: 10px;
  width: 100px;
  border-radius: 5px;
  position: absolute;
  right: 0;
  li {
    display: flex;
    span {
      padding: 3px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    span:nth-child(2) {
      border-bottom: 1px solid #eee;
    }
  }
}
</style>
